<template>
	<div class="main_content_1">
		<el-dialog title="创建章节" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<el-input v-model="Chapter" placeholder="输入章节名" class="input"></el-input>
			<el-input v-model="periodNum" placeholder="输入课时数量" class="input" style="margin-top: 1.25rem;"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false" style="color: #03D3BD;border: #03D3BD solid 0.0625rem;">取 消</el-button>
				<el-button type="primary" @click="CreatChapterForCourse()" style="background-color: #03D3BD;color: white;border: none;">确
					定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="修改章节" :visible.sync="dialogVisiblet" width="30%" :before-close="handleClose">
			<el-input v-model="chapterName" placeholder="输入章节名" class="input"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisiblet = false" style="color: #03D3BD;border: #03D3BD solid 0.0625rem;">取 消</el-button>
				<el-button type="primary" @click="updateChapterInf()" style="background-color: #03D3BD;color: white;border: none;">确
					定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="创建课时" :visible.sync="dialogVisiblek" width="30%" :before-close="handleClose">
			<el-input v-model="periodName" placeholder="输入课时名" class="input"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisiblek = false" style="color: #03D3BD;border: #03D3BD solid 0.0625rem;">取 消</el-button>
				<el-button type="primary" @click="creatPeriod()" style="background-color: #03D3BD;color: white;border: none;">确
					定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="修改课时" :visible.sync="dialogVisiblekt" width="30%" :before-close="handleClose">
			<el-input v-model="periodNamet" placeholder="输入课时名" class="input"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisiblekt = false" style="color: #03D3BD;border: #03D3BD solid 0.0625rem;">取 消</el-button>
				<el-button type="primary" @click="updateChaupdatePeriodById()" style="background-color: #03D3BD;color: white;border: none;">确
					定</el-button>
			</span>
		</el-dialog>
		<div class="left">
			<div>
				<p>目录</p>
				<el-collapse v-model="activeName" accordion>
					<div v-for="(item, idx) of ChapterIdList" :key="item.id"  @click="getPeriodByChapterId(item.id)">
					<el-collapse-item  :name="item.id">
						<template slot="title" >
							<div style="display: flex;justify-content:space-between;width: 100%;">
								<div style="display: flex;justify-content: center;align-items: center;">
								<div class="icon">
									<span>{{ idx+1}}</span>
								</div>
								<h3>{{ item.chapterName}}</h3>
								</div>
								<div style="margin-right: 0.625rem;">
									<span style="margin-right: 0.625rem;" @click="dialogVisiblek=true">添加</span><span style="margin-left: 0.625rem;"  @click="Changechapter(item.chapterName)">修改</span><span style="margin-left: 0.625rem;"
									 @click="deleteChapter(item.id)">删除</span>
								</div>
							</div>
						
						</template>
						<ul>
							<li v-for="(itemTitle, indx) of PeriodIdList" :key="indx" @mouseenter="itemTitle.isFalse = true" @mouseleave="itemTitle.isFalse = false">
								{{ itemTitle.periodName }}
								<div style="margin-right: 0.625rem;" v-show="itemTitle.isFalse">
									<span @click="Changeperiod(itemTitle.periodName,itemTitle.id)">修改</span><span @click="deletePeriodById(itemTitle.id)">删除</span>
								</div>
							</li>
						</ul>
					</el-collapse-item>
				    </div>
				</el-collapse>
				<el-button class="activet" @click="dialogVisible=true">添加章节</el-button>
			</div>
		</div>
		<div class="right">
			<div style="margin-top: 1.25rem;margin-left: 0.625rem;">
				第一课
			</div>
			<div class="course">
				<div>
					<div>
						<el-button v-for="(Item,index) in List" :class="{active:Item.title==isActive}" class="Main" @click="Change(Item)" :key="index">{{Item.title}}</el-button>
					</div>
				</div>
				<div v-if="isActiveId==1" style="background-color: #f3f3f3;height:25rem;margin-bottom: 1.25rem;display: flex;justify-content: center;align-items: center;">
					<div>
						<el-upload
						 :show-file-list="false"
						 accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
						 action="http://101.43.71.61:8080/minio/upload"
						 :on-success="success"
						 :headers="myHeader"
						 >
						<el-button class="active" style="background-color: #ffaa00;width: 12.5rem;height: 3.25rem;">上传课件</el-button>
						</el-upload>
						
					</div>

				</div>
				<div style="background-color: #f3f3f3;height:25rem;margin-bottom: 1.25rem;overflow: hidden;" v-if="isActiveId==2">
					<div style="width: 90%;margin-right: 5%;margin-top: 2.625rem;">
						<div>
							<el-upload
							 :show-file-list="false"
							 accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
							 action="http://101.43.71.61:8080/minio/upload"
							 :on-success="success"
							 :headers="myHeader"
							 >
							<el-button class="active" >上传附件</el-button>
							</el-upload>
							
						</div>
						<ul class="mian_ul">
							<li style="display: flex;justify-content: space-between;"><span>面试题目</span>
								<div><span>删除</span><span>查看</span></div>
							</li>
							<li style="display: flex;justify-content: space-between;"><span>面试题目</span>
								<div><span>删除</span><span>查看</span></div>
							</li>
							<li style="display: flex;justify-content: space-between;"><span>面试题目</span>
								<div><span>删除</span><span>查看</span></div>
							</li>
						</ul>
					</div>
				</div>
				<div style="background-color: #f3f3f3;height: 18.75rem;margin-bottom: 1.25rem;" v-if="isActiveId==3"></div>
			</div>

		</div>
	</div>

</template>

<script>
	import {
		HttpManager
	} from "../../../../request/Teacher.js"
	export default {
		data() {
			return {
				search: "",
				activeName: 0,
				imageUrl: '',
				radio: 1,
				List: [{
						id: 1,
						title: "上传主件"
					},
					{
						id: 2,
						title: "上传附件"
					},
					{
						id: 3,
						title: "上传资料"
					},
					{
						id: 4,
						title: "章节测试"
					}
				],
				isActive: "上传主件",
				isActiveId: 1,
				ChapterIdList: [],
				PeriodIdList: [],
				Chapter: '第n章节',
				dialogVisible: false,
				dialogVisiblet: false,
				periodNum: 1,
				classID: window.localStorage.getItem("ClassId"),
				chapterName:'',
				dialogVisiblek:false,
				dialogVisiblekt:false,
				periodName:'第n课时',
				periodNamet:'',
				id:'',
				dialogImageUrl:"https://cdnoss.kaoshixing.com/ksx_prod/367700/file/sign/20211126/-1770398744.jpg",
				myHeader: {
					token: window.localStorage.getItem("token")
				}

			};
		},
		created() {
			this.getChapterByCourseId();
		},
		methods: {
			handleClose() {
				this.dialogVisible = false;
			},
			//修改章节的弹框
			Changechapter(chapterName)
			{
				this.chapterName=chapterName;
				this.dialogVisiblet=true
			},
			//修改课时的弹框
			Changeperiod(periodNamet,id)
			{
				this.dialogVisiblekt=true;
				this.periodNamet=periodNamet;
				this.id=id;
			},
			//课程检测
			Change(Item) {
				if (Item.id == 4) {
					this.$router.push("/CreatTest")
				}
				this.isActiveId = Item.id;
				this.isActive = Item.title;
			},
			//获取课程下面的章节列表
			getChapterByCourseId() {
				var classID = window.localStorage.getItem("ClassId");
				var parmas = {
					courseId: classID,
					isTeacher: true
				}
				HttpManager.getChapterByCourseId(parmas).then(
					e => {
						console.log(e);
						this.ChapterIdList = e.data.data;
					}
				)
			},
			//获取章节下的课时
			getPeriodByChapterId(chapterId) {
				var p= {
					chapterId: chapterId,
					isTeacher: true
				}
				HttpManager.getPeriodByChapterId(p).then(
					e => {
						console.log(e);
						this.PeriodIdList = e.data.data;
					}
				)
			},
			//为课程添加章节
			CreatChapterForCourse() {
				var parmas = {
					chapterName: this.Chapter,
					chapterNumber: 1,
					courseId: this.classID,
					
				}
				HttpManager.creatChapterForCourse(parmas, this.periodNum).then(e => {
					console.log(e);
					this.$message({
						message: '章节创建成功',
						type: 'success'
					});
					this.dialogVisible = false;
					this.getChapterByCourseId();
				})
			},
			//删除章节
			deleteChapter(id) {
				// alert(id);
				HttpManager.deleteChapter(id).then(e => {
					this.$message({
						message: '章节删除成功',
						type: 'success'
					});
					console.log(e);
					this.dialogVisiblet = false;
				})
			},
			//修改章节
			updateChapterInf() {
				var parmas = {
                  chapterName:this.chapterName,
				  chapterNumber: 1,
				  courseId: this.classID,
				  id:1
				}
				HttpManager.updateChapterInf(parmas).then(e => {
					console.log(e);
					this.$message({
						message: '章节创建成功',
						type: 'success'
					});
					this.dialogVisiblet = false;
				})
			},
			//创建课时
			creatPeriod() {
				// alert(this.activeName);
				var parmas = {
					chapterId: this.activeName,
					periodName:this.periodName,
					periodNumber:1
				}
				HttpManager.creatPeriod(parmas).then(e => {
					this.$message({
						message: '课时创建成功',
						type: 'success'
					});
					this.dialogVisiblek = false;
				})
			},
			//删除课时
			deletePeriodById(periodId) {
				HttpManager.deleteChapter(periodId).then(e => {
					this.$message({
						message: '课时删除成功',
						type: 'success'
					});
					console.log(e);
				})
			},
			//修改课时
			updateChaupdatePeriodById() {
				alert(this.id);
				var params = {
					chapterId:this.activeName,
					periodName:this.periodNamet,
					id:this.id
				}
				HttpManager.updatePeriodById(params).then(e => {
					console.log(e);
				})
			},
			success()
			{
				
			}
			

		}
	};
</script>


<style scoped="scoped" lang="scss">
	.main_content_1 {
		display: flex;


		&>.left {
			width: 30%;
			height: 36.25rem;
			// background-color: lawngreen;
		}
	}

	.left div>p {
		height: 50px;
		color: #d0d5db;
		display: flex;
		align-items: flex-end;
		padding: 0 10px;
	}

	.el-collapse .icon {
		height: 23px;
		width: 45px;
		// margin-top: 0.625rem;
		line-height: 20px;
		border-radius: 30px;
		background: #d0d5db;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-left: 15px;
	}

	.el-collapse .icon>span {
		display: block;
		border-radius: 50%;
		height: 20px;
		width: 20px;
		border: 4px solid #d0d5db;
		background: white;
		text-align: center;
		line-height: 20px;
	}

	.el-collapse li {
		display: block;
		height: 50px;
		/* border: 1px solid; */
		display: flex;
		position: relative;
		align-items: center;
		padding-left: 60px;
		justify-content: space-between;
	}

	.el-collapse li:hover {
		background: #f0f6ff;
		color: #000000;
	}

	.el-collapse li>div {
		// padding-right: 500px;
	}

	.el-collapse li>div span {
		height: 30px;
		width: 60px;
		display: inline-block;
		border-radius: 30px;
		text-align: center;
		line-height: 30px;
		cursor: pointer;
	}

	.el-collapse li>div span:nth-child(1) {
		color: #03D3BD;
		// background-image: linear-gradient(to right, #03D3BD, #04DAC4);
	}

	.el-collapse li>div span:nth-child(2) {
		color: #ffaa00;
	}

	.right {
		width: 70%;
		// height: 100vh;

	}

	.buttom_item {}

	.course {
		min-height: 100px;
		margin-top: 1.25rem;
		border-radius: 5px;
		border: 1px solid #d4d4d4;
		margin-left: 1.625rem;
		margin-right: 1.625rem;

	}

	.course>div {
		display: flex;
		justify-content: flex-end;
		margin-left: 0.625rem;
		margin-right: 0.625rem;
		margin-top: 1.25rem;
	}

	.mian_ul>li {
		// height: 3.125rem;
		// line-height: 3.125rem;
		// border: 0.0625rem solid #d0d0d0;
		padding: 1.5rem;
	}

	.mian_ul>li>div>span {
		margin-left: 0.625rem;
	}

	.right_Item {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;

	}

	.Main {
		color: #a3a3a3;
		border: #b5b5b5 solid 0.0625rem;
	}

	.active {
		background-color: #03d3bd;
		color: white;
		border: none;
	}

	.activet {
		margin-top: 3.625rem;
		margin-left: 1.25rem;
	}
</style>
